import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
import PropTypes from 'prop-types';

import Sales from 'bee/containers/Sales';
import Customers from 'bee/containers/Customers';
import Services from 'bee/containers/Services';
import MyAccount from 'bee/containers/MyAccount';

import { px2dp } from 'bee/utils';
import { colors, sizes } from 'bee/themes';

import { navOptions } from 'bee/navigations';
import { Icon, Names } from 'bee/components/Icon';

const RouterConfig = {
  Sales: {
    screen: Sales,
    navigationOptions: () =>
      navOptions('展业', navOptions.TYPE_BLUE, {
        tabBarIcon(params) {
          return (
            // <Text
            //   style={[
            //     styles.icon,
            //     params.focused ? styles.activeIcon : styles.inactiveIcon,
            //   ]}
            // >

            // </Text>
            <Icon
              name={Names.shouye}
              color={params.focused ? colors[1001] : colors[1103]}
              size={sizes.bottomBarIconSize}
            />
          );
        },
      }),
  },
  Customers: {
    screen: Customers,
    navigationOptions: () =>
      navOptions('客戶', navOptions.TYPE_BLUE, {
        tabBarIcon(params) {
          return (
            // <Text
            //   style={[
            //     styles.icon,
            //     params.focused ? styles.activeIcon : styles.inactiveIcon,
            //   ]}
            // >
            //   客户
            // </Text>
            <Icon
              name={Names.kehu}
              color={params.focused ? colors[1001] : colors[1103]}
              size={sizes.bottomBarIconSize}
            />
          );
        },
      }),
  },
  Services: {
    screen: Services,
    navigationOptions: () =>
      navOptions('服务', navOptions.TYPE_BLUE, {
        tabBarIcon(params) {
          return (
            // <Text
            //   style={[
            //     styles.icon,
            //     params.focused ? styles.activeIcon : styles.inactiveIcon,
            //   ]}
            // >
            //   服务
            // </Text>
            <Icon
              name={Names.fuwu}
              color={params.focused ? colors[1001] : colors[1103]}
              size={sizes.bottomBarIconSize}
            />
          );
        },
      }),
  },
  MyAccount: {
    screen: MyAccount,
    navigationOptions: () =>
      navOptions('我的', navOptions.TYPE_BLUE, {
        tabBarIcon(params) {
          return (
            // <Text
            //   style={[
            //     styles.icon,
            //     params.focused ? styles.activeIcon : styles.inactiveIcon,
            //   ]}
            // >
            //   我的
            // </Text>
            <Icon
              name={Names.wode}
              color={params.focused ? colors[1001] : colors[1103]}
              size={sizes.bottomBarIconSize}
            />
          );
        },
      }),
  },
};

const TabNavigatorConfig = {
  // tabBarComponent: TabBarBottom,
  // tabBarPosition: 'bottom',
  swipeEnabled: false,
  animationEnabled: false,
  tabBarOptions: {
    activeTintColor: colors[1001],
    inactiveTintColor: colors[1103],
    labelStyle: {
      fontSize: sizes.f0,
    },
    style: {
      height: px2dp(98),
      borderColor: colors[1003],
      borderWidth: StyleSheet.hairlineWidth,
    },
  },
  backBehavior: 'none',
};

const MainTab = createBottomTabNavigator(RouterConfig, TabNavigatorConfig);

// @flow
// type Props = {
//   navigation: object,
// };
export default class Main extends Component {
  static navigationOptions = {
    header: null,
  };

  render() {
    return <MainTab navigation={this.props.navigation} />;
  }
}

Main.router = MainTab.router;

Main.propTypes = {
  navigation: PropTypes.objectOf(
    PropTypes.oneOfType([PropTypes.object, PropTypes.func])
  ).isRequired,
};
// const styles = {
//   icon: {
//     fontSize: px2dp(39),
//     fontFamily: 'iconfont',
//   },
//   activeIcon: {
//     color: colors[1001],
//   },
//   inactiveIcon: {
//     color: colors[1103],
//   },
// };
